import React, { memo, useContext,useState ,useCallback,useEffect} from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { NavLink } from 'react-router-dom'
import { AudioContext } from '../../../app-player-bar';

import {
  getSongDetailAction,
  changePlayStatusAction
} from '../../../store/actionCreator'

import {getSizeImage ,getPlayUrl , formatDate} from '@/utils/format-utils'
import{ PlayerInfo } from './style'
import { Slider} from 'antd'


function PlayInfo(props ={}){
  const {audioRef,currentTime, isChanging} = props
  const {  setCurrentTime ,setIsChanging } = useContext(AudioContext);
  const [progress, setProgress] = useState(0) // 滑块进度

  // redux hook
  const dispatch = useDispatch()

  const {
    currentSong,
    
  } = useSelector(
    (state) => ({
      currentSong: state.getIn(['player', 'currentSong']),
      playStatus: state.getIn(['player', 'playStatus'])
    }),
    shallowEqual
  )

  const picUrl = currentSong.al && currentSong.al.picUrl // 图片url
  const songName = currentSong.name // 歌曲名字
  const singerName = currentSong.ar && currentSong.ar[0].name //作者名字
  const duration = currentSong.dt //播放总时间
  const songUrl = getPlayUrl(currentSong.id) // 歌曲URL

  useEffect(() => {
    dispatch(getSongDetailAction(167876))
  }, [dispatch])

  useEffect(() => {
    setProgress((currentTime / duration) * 100)
  }, [currentTime])

  const sliderChange = useCallback(
    (value) => {
       // 滑动滑块时:更改标识变量为false(touch move for changing state),此时不会触发onTimeUpdate(歌曲播放事件)
       setIsChanging(true)
      // 更改"当前播放时间"要的是毫秒数: 241840(总毫秒)   1 * 241840 / 1000 241.84 / 60  4.016667
      const currentTime = (value / 100) * duration
      setCurrentTime(currentTime)
      // 更改进度条值
      setProgress(value)
    },
    [progress],
  )

  const slideAfterChange = useCallback(
    (value) => {
      const currentT = ((value / 100) * duration) / 1000
       // 设置当前播放时间的state,设置的是'毫秒',所以需要*1000
       audioRef.current.currentTime = currentT
       setCurrentTime(currentT *1000)
       setIsChanging(false)
       // 更改播放状态
       dispatch(changePlayStatusAction(true))
       // 播放音乐
      audioRef.current.play()
    },
    [duration,audioRef],
  )

  // useImperativeHandle(ref, () => ({
  //   sliderChang,
  // }), [sliderChang]);

  return (
        <PlayerInfo>
          <NavLink
              to={{
                pathname: '/discover/song',
              }}
              className="image"
            >
            <img src={getSizeImage(picUrl, 35)} alt="" />
          </NavLink>
          <div className="play-detail">
            <div className="song-info">
              <NavLink to="/discover/song" className="song-name">
                {songName}
              </NavLink>
              <a href="/author" className="no-link singer-name">
                {singerName}
              </a>
            </div>
            <Slider
              defaultValue={0}
              value={progress}
              onChange={sliderChange}
              onAfterChange={slideAfterChange}
            />
          </div>
          <div className="song-time">
            <span className="now-time">{formatDate(currentTime, 'mm:ss')}</span>
            <span className="total-time">
              {' '}
              / {duration && formatDate(duration, 'mm:ss')}
            </span>
          </div>
        </PlayerInfo>
  )
}

export default memo(PlayInfo)